<template>
  <van-pull-refresh class="wrap van_pull_refresh"
                    v-model="loading"
                    @refresh="getList"
                    style="background-color: #f5f5f5">

    <div class="card">
      <text style="font-weight: bold;font-size: 18px">退款详情</text>
      <div class="dividerH"></div>

      <text>有{{refunds?.total}}笔售后单</text>
    </div>

    <div class="card" style="margin-top: 10px" v-for="(item,index) in refunds?.records" v-if="refunds">
      <div>
        <text class="textasdsad">{{refundStatusEnum[item.refundStatus]}}</text>
      </div>
      <div v-if="item.refundStatus==2">
        <text class="text1sajdk">已到账</text>
      </div>
      <div class="divider"></div>
      <div class="row" style="width: 100%" @click="()=>{
        toDetail(item.refundNumber)
      }">
        <text>退款金额</text>
        <div style="width: 23px"></div>
        <text>¥ {{item.refundAmount.toFixed(2)}}({{item.goodsCount}}张)</text>
        <div style="flex-grow: 1"></div>
        <text>展开</text>
        <van-icon name="arrow-down"/>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router';
import {orderStatusEnum} from "@/views/activityPages/const/orderStatus.ts";
import {ref} from "vue";
import api from "@/api";
import {refundStatusEnum} from "../const/refundStatus.ts";

const router = useRouter();
const route = useRoute()
const loading = ref(false)

function toDetail(id: any) {

  router.push({
    path: `/refund-detail`, query: {
      id
    }
  });
}
const refunds = ref(null)
function getList(){
  api.getRefundList({orderNumber:route.query.id}).then(res=>{
    refunds.value=res.data;
    console.log('refunds.value ',refunds.value)
  })
}
getList()
</script>

<style scoped lang="scss">
@import url('@/views/activityPages/style/card.css');

.textasdsad {
  color: rgb(16, 16, 16);
  font-size: 18px;
  font-weight: bold;
}

.text1sajdk {
  color: rgb(102, 102, 102);
  font-size: 12px;
}

.wrap {
  background: #f9f8f3;
  overflow: scroll;
  height: 100%;
}
</style>
